<template>
  <view>
    <base-paging ref="paging" :add-fad="true" :datasource="datasource"
                 @fad-click="toBasePath('/edit')">
      <template #default="{ list }">
        <template v-for="(item, index) in list" :key="index">
          <base-card :title="item.repairTime + ' 故障'">
            <template #extra>
              <view style="color: red">{{ tabs.find(v => v.key === item.flag)?.name }}</view>
            </template>
            <view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 200rpx;color: #999999;">预计取车时间</text>
                <text style="color: #333333;">{{ item.pickupTime }}</text>
              </view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 200rpx;color: #999999;">维修类型</text>
                <text style="color: #333333;">{{ item.type }}</text>
              </view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 200rpx;color: #999999;">申请人</text>
                <text style="color: #333333;">{{ item.ctPersonName }}</text>
              </view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 200rpx;color: #999999;">车牌号</text>
                <text style="color: #333333;">{{ item.plateNumber }}</text>
              </view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 200rpx;color: #999999;">故障原因</text>
                <text style="color: #333333;">{{ item.reason }}</text>
              </view>
            </view>
            <template #actions>
              <view style="display: flex;gap: 0 20rpx;margin-bottom: 20rpx;">
                <!-- <u-button @click.stop="toBasePath('/detail?id=' + item.id)"  type="primary" text="查看详情"  ></u-button>
                <u-button v-if="['apply'].includes(item.flag)" @click.stop="remove(item)"     :plain="true" text="删除"  ></u-button> -->
				<view  v-if="['apply'].includes(item.flag)" @click.stop="remove(item)" class="shanchu flexmid">删除</view>
				<view  @click.stop="toBasePath('/detail?id=' + item.id)" class="ckxq flexmid">查看详情</view>
              </view>
            </template>
          </base-card>
        </template>
      </template>
    </base-paging>
  </view>
</template>

<script>
import {Msg, toPath} from "@/utils/BaseUtils";
import {VehicleRepairApi as Api} from "@/comms/api/vehicleRepairApi";

export default {
  data() {
    return {
      toPath,
	  imag:{
	  		  audit:'/static/my/jz.png',
	  		  agree:'/static/my/ytg.png',
	  		  reject:'/static/my/jz.png'
	  },
      // 报修:apply 派修:dispatch 维修:repair 完成:complete"
      tabs: [
        {key: 'apply', name: '报修',},
        {key: 'dispatch', name: '派修'},
        {key: 'repair', name: '维修'},
        {key: 'complete', name: '完成'},
      ]
    }
  },
  mounted() {
  },
  onShow() {
    this.reload()
  },
  methods: {
    reload() {
      this.$refs.paging.reload();
    },
    datasource({pageNo, tab}) {
      return Api.page({pageNo, flag: tab.key})
    },
    remove({id}) {
      Msg.confirm("确定删除该维修申请信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              this.reload();
              Msg.success("删除成功")
            })
          })
    },
    toBasePath(path) {
      toPath("/pages/mys/vehicleRepair" + path)
    }
  }
}
</script>

<style lang="scss" scoped>
	.shanchu{
		width: 170rpx;
		height: 70rpx;
		border: 1px solid #b3b3b3;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #999;
	}
	.ckxq{
		width: 170rpx;
		height: 70rpx;
		border: 1px solid #1763FC;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #1763FC;
	}
	
.uni-card {
  margin-bottom: 15rpx;
}

.button-group {
  button {
    margin-left: 10rpx;
  }
}
</style>
